<template>
  <div class="step">
    <template v-for="(item, index) in list">
      <a-tooltip :key="index + 'tooltip'">
        <template slot="title">
          {{ item.stepDesc || '暂无' }}
        </template>
        <div class="stepItem"
          :class="{ 'currentStepItem': currentNum == item.stepOrder, 'beforeStepItem': currentNum > item.stepOrder }">
          <div class="stepItemNum" @click="$emit('changeStep', item, item.stepOrder)">{{ index + 1 }}</div>
          <div class="stepItemName" :class="{ 'isDelBtn': edit }" :title="edit ? '点击删除/编辑' : item.stepName"
            @click="delStep(item)">{{
              item.stepName }}</div>
        </div>
      </a-tooltip>
      <div v-if="list.length != index + 1" :key="index + 'Line'" class="line"
        :style="`width: ${5 * (list.length <= 5 ? 6 - list.length : 1)}%;`"></div>
    </template>
    <div v-if="list.length == 0">请先添加步骤在进行公式配置1</div>

    <a-modal title="修改步骤" :visible="editVisible" :confirm-loading="editLoading" @ok="editConfig" @cancel="editCancel"
      cancelText="删除">
      <template slot="footer">
        <a-button @click="editCancel">取消</a-button>
        <a-button @click="editDel" type="danger">删除</a-button>
        <a-button @click="editConfig" type="primary">保存</a-button>
      </template>
      <a-form-model ref="stepForm" :rules="modalRules" :model="modalForm">
        <a-form-model-item label="步骤名称" prop="stepName">
          <a-input v-model="modalForm.stepName" :maxLength="20" placeholder="请输入步骤名称" />
        </a-form-model-item>
        <a-form-model-item label="步骤说明" prop="stepDesc">
          <a-input v-model.number="modalForm.stepDesc" type="textarea" placeholder="请输入步骤说明" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { postAction } from '../../../../api/manage';
export default {
  props: {
    isCheck: {
      type: Boolean,
      default: false,
    },

    currentNum: {
      default: null,
    },
    list: {
      type: Array,
      default: [],
    },
    edit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editVisible: false,
      editLoading: false,
      modalForm: {},
      modalRules: {
        stepName: [{ required: true, message: '请输入步骤名称', trigger: 'blur' }],
      },
      url: {
        editStep: '/sjmx2/modelTemplateStep/edit',
      },
    }
  },
  methods: {
    editConfig() {
      postAction(this.url.editStep, this.modalForm).then((res) => {
        this.$emit('edit');
        this.editVisible = false;
        this.$nextTick(() => {
          this.modalForm = {};
        })
      })
    },
    editDel() {
      this.$confirm({
        title: '是否删除步骤?',
        onOk: () => {
          this.$emit('del', this.modalForm);
          this.editVisible = false;
          this.modalForm = {};
        },
      });
    },
    editCancel() {
      this.editVisible = false;
      this.modalForm = {};
    },
    delStep(data) {
      if (this.isCheck == false) {
        if (this.edit) {
          for (let key in data) {
            this.modalForm[key] = data[key];
          }
          this.editVisible = true;
          // this.$confirm({
          //   title: '是否删除步骤?',
          //   onOk: ()=>{
          //     this.$emit('del', data);
          //   },
          //   onCancel() {},
          // });
        }
      }
    }
  },
}
</script>

<style lang="less">
.step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

.stepItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;

  .stepItemNum {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    min-height: 25px;
    width: 25px;
    min-width: 25px;
    margin-right: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: normal;
    letter-spacing: normal;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #D7D7D7;
  }

  .stepItemName {
    width: calc(100% - 40px);
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: normal;
    color: #AAAAAA;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
  }

  .isDelBtn {
    cursor: pointer;
  }
}

.currentStepItem {
  .stepItemNum {
    background-color: #F59A23;
  }

  .stepItemName {
    color: #333333;
  }
}

.beforeStepItem {
  .stepItemNum {
    background-color: #3154A4;
  }

  .stepItemName {
    color: #333333;
  }
}

.line {
  display: inline-block;
  height: 10px;
  background-color: #DFE5F9;
  border-radius: 25px;
  margin: 0 10px;
}
</style>